import React from 'react';
import './index.less';
import PropTypes from 'prop-types';
import CommonHeader from 'COMPONENT/CommonHeader';

class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);

        this.state={ 
            money:'2,000.00',//应还借款
            crtDate:'2016-02-21',//最后还款日期
            borrowMoney:'100,000.00',//还能再借
            endDate:'2019-11-23',//借款截止日
            listData:[
                {
                    code:'1234XXXX4321',//借款凭证号
                    applyDate:'2015-12-22',//申请日期
                    date:'2016-12-22',//本期还款日
                    num:'19/23',//第多少期
                    getMoney:'20,122.00',//应还金额
                    resMaturity:'2015-12-22',//贷款剩余期限
                    principal:'2,000,000.00',//未还本金
                    loanMoney:'123,000.00',//贷款金额

                },
                {
                    code:'1234XXXX4321',//借款凭证号
                    applyDate:'2015-12-22',//申请日期
                    date:'2016-12-22',//本期还款日
                    num:'19/23',//第多少期
                    getMoney:'20,122.00',//应还金额
                    resMaturity:'2015-12-22',//贷款剩余期限
                    principal:'2,000,000.00',//未还本金
                    loanMoney:'123,000.00',//贷款金额

                },
                {
                    code:'1234XXXX4321',//借款凭证号
                    applyDate:'2015-12-22',//申请日期
                    date:'2016-12-22',//本期还款日
                    num:'19/23',//第多少期
                    getMoney:'20,122.00',//应还金额
                    resMaturity:'2015-12-22',//贷款剩余期限
                    principal:'2,000,000.00',//未还本金
                    loanMoney:'123,000.00',//贷款金额

                }
            ]
        }
    }

    componentDidMount(){ 
        //初始化
    }
    //再借一笔
    getOneMore=()=>{ 
        this.context.router.push({
			pathname: '/houseLoan/HouseLoanApply'
        })
    }
    getLoanInfo=(item)=>{ 
        this.context.router.push({
			pathname: '/MineLoan/MineLoanInfo'
        })
    }
    getRetLoanInfo=(item)=>{ 
        // this.context.router.push({
		// 	pathname: '/houseLoanAdd'
    }   
    getMoreInfo=(item)=>{ 
        // this.context.router.push({
		// 	pathname: '/houseLoanAdd'
    }    
    knowLoan=()=>{ 
        // this.context.router.push({
		// 	pathname: '/houseLoanAdd'
    }
    knowBackLoan=()=>{ 
        // this.context.router.push({
		// 	pathname: '/houseLoanAdd'
    }
    //提交数据
    btnClick=()=>{ 
        localStorage.setItem('hmdData',JSON.stringify(this.state.hmdData));
        //跳转下个页面
        // this.context.router.push({
		// 	pathname: '/HmdMain/HmdCTools'
        // })
    }

    render() {
        
        return (
            <div className="mine_loan_detail">
           		<CommonHeader 
					name='我的房抵贷'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>
                
                <div className="hmd_apply_top">
                    <div className="hmd_apply_top_title">未还本金</div>
                    <div className="hmd_apply_top_money">￥20,000.00元</div>
                    <div className="hmd_apply_top_info"><span>最近还款日{this.state.crtDate}.应还金额￥{this.state.money}</span></div>
                    <div className="hmd_apply_top_bottom">
                        <div>
                            <span>还能再借</span><span>￥{this.state.borrowMoney}</span><span onClick={this.getOneMore}>再借一笔</span>
                        </div>
                        <div>
                            <span>借款截至日</span><span>{this.state.endDate}</span>
                        </div>
                    </div>
                </div>
                {this.state.listData.map(item=>(
                     <div className="hmd_list">
                            <div className="hmd_list_up">
                                <span>借款凭证号:{item.code}</span><span>{item.applyDate}申请</span>
                            </div>
                            <div className="hmd_list_down">
                                <div>
                                    <span>本期还款日</span><span>{item.date}</span><span style={{float:"right",color:"#777"}}>第{item.num}期</span>
                                </div>
                                <div>
                                    <span>本期应还金额</span><span>{item.getMoney}</span>
                                </div>
                                <div>
                                    <span>贷款剩余期限</span><span>{item.resMaturity}</span>
                                </div>
                                <div>`
                                    <span>未还本金</span><span>{item.principal}</span>
                                </div>
                                <div>
                                    <span>贷款金额</span><span>{item.loanMoney}</span>
                                </div>
                                <div>
                                    <span></span><span className="last_span" onClick={this.getLoanInfo.bind(this,item)}>查看贷款详情</span>
                                    <span onClick={this.getRetLoanInfo(item)}>还款信息查询</span>
                                    <span onClick={this.getMoreInfo(item)}>更多></span>
                                </div>
                            </div>
                     </div>
                ))}
               <div className="hmd_list_foot">
                    <span onClick={this.knowLoan}>了解房抵贷</span>|<span onClick={this.knowBackLoan}>已结清贷款记录</span>
                </div>

            </div>
        );
    }
}
export default HmdMain;